<template>
	<view>
		<!-- 头部开始 -->
		<view class="box-bg">
			<uni-nav-bar 
			 @clickLeft="$utils.ret()"
			 leftWidth='200rpx' rightWidth='200rpx'
			left-icon="left" leftText="返回" title="门店列表" />
		</view>
		<!-- 头部结束 -->
		
		<!-- 导航开始 -->
		<view class="nav">
			<view class="nav_search">
				<uni-easyinput placeholder="搜索关键字"suffixIcon="search"></uni-easyinput>
			</view>
			<view class="nav_screen">
				<uni-easyinput placeholder="筛选" suffixIcon=" iconfont icon-shaixuan1"></uni-easyinput>
			</view>
		</view>
		<!-- 导航结束 -->
		
		<!-- 内容开始 -->
		<view class="contentbox">
			<view class="content" @click="$utils.go('/pages/shop/shop')">
				<image src="../../static/shop_list.jpg" mode=""></image>
				<view class="box">
					<view class="title">
						吉野家牛肉饭
					</view>
					<p>美食 | 午饭</p>
					<button  type="primary">查看详情</button>
				</view>
			</view>
			<view class="content">
				<image src="../../static/shop_list.jpg" mode=""></image>
				<view class="box">
					<view class="title">
						吉野家牛肉饭
					</view>
					<p>美食 | 午饭</p>
					<button class="btn" type="primary">查看详情</button>
				</view>
			</view>
			<view class="content">
				<image src="../../static/shop_list.jpg" mode=""></image>
				<view class="box">
					<view class="title">
						吉野家牛肉饭
					</view>
					<p>美食 | 午饭</p>
					<button  type="primary">查看详情</button>
				</view>
			</view>
			<view class="content">
				<image src="../../static/shop_list.jpg" mode=""></image>
				<view class="box">
					<view class="title">
						吉野家牛肉饭
					</view>
					<p>美食 | 午饭</p>
					<button class="btn" type="primary">查看详情</button>
				</view>
			</view>
			<view class="content">
				<image src="../../static/shop_list.jpg" mode=""></image>
				<view class="box">
					<view class="title">
						吉野家牛肉饭
					</view>
					<p>美食 | 午饭</p>
					<button class="btn" type="primary">查看详情</button>
				</view>
			</view>
			<view class="content">
				<image src="../../static/shop_list.jpg" mode=""></image>
				<view class="box">
					<view class="title">
						吉野家牛肉饭
					</view>
					<p>美食 | 午饭</p>
					<button class="btn" type="primary">查看详情</button>
				</view>
			</view>
			<view class="content">
				<image src="../../static/shop_list.jpg" mode=""></image>
				<view class="box">
					<view class="title">
						吉野家牛肉饭
					</view>
					<p>美食 | 午饭</p>
					<button class="btn" type="primary">查看详情</button>
				</view>
			</view>
		</view>
		<!-- 内容结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f1f5f8;
	}
// 头部开始
/deep/.uni-navbar__content{
	border: none;
}
// 头部结束

// 导航开始
.nav {
	height: 126rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
	box-sizing: border-box;
	.nav_search {
		display: flex;
		justify-content: space-between;
		width: 60%;
		line-height: 92rpx;
		margin-left: 33rpx;
		font-size: 25rpx;
		/deep/.uni-easyinput__content {
			height: 75rpx;
			background-color: #f4f6f6 !important;
			border-radius: 60rpx;
		}
	}
	.nav_screen {
		display: flex;
		justify-content: space-between;
		border-radius: 60rpx;
		margin-left: 25rpx;
		line-height: 92rpx; 
		font-size: 25rpx;
		width: 40%;
		margin-right: 20rpx;
		/deep/.uni-easyinput__content {
			height: 75rpx;
			background-color: #f4f6f6 !important;
			border-radius: 60rpx;
		}
	}
}
// 导航结束

// 内容开始
.contentbox {
	margin-top: 23rpx;
	.content {
		height: 232rpx;
		background-color: #fff;
		margin-bottom: 21rpx;
		display: flex;
		image {
			width: 186rpx;
			height: 186rpx;
			border-radius: 5rpx;
			margin-left: 20rpx;
			margin-top: 22rpx;
		}
		.box {
			.title {
				font-size: 34rpx;
				color: #2d2d2d;
				margin-top: 32rpx;
				margin-left: 26rpx;
			}
			p {
				font-size: 28rpx;
				color: #9e9e9e;
				margin-left: 26rpx;
				margin-top: 17rpx;
			}
			.btn {
				width: 124rpx;
				height: 42rpx;
				background-color: #5eadf0;
				border-radius: 5rpx;
				text-align: center;
				line-height: 42rpx;
				font-size: 16rpx;
				color: #fff;
				margin-left: 26rpx;
				margin-top: 28rpx;
				padding: 0;
			}
			
		}
	}
}
button{
	width: 124rpx;
	height: 42rpx;
	background-color: #5eadf0;
	border-radius: 5rpx;
	text-align: center;
	line-height: 42rpx;
	font-size: 16rpx;
	color: #fff;
	margin-left: 26rpx;
	margin-top: 28rpx;
}
// 内容结束
</style>
